<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>修改个人信息</title>
    <style>
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .upload-loading {
            position: relative;
            opacity: 0.7;
        }
        .upload-loading::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 24px;
            border: 3px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body class="bg-gray-100 font-sans min-h-screen py-10 px-4">
<div class="max-w-3xl mx-auto">
    <div th:if="${result.code == 1}">
        <div class="bg-white shadow-lg rounded-lg overflow-hidden mb-8">
            <div class="p-6 border-b border-gray-200 bg-blue-50">
                <h1 class="text-2xl font-bold text-gray-800">修改个人信息</h1>
            </div>

            <form th:action="@{/user/update}" method="post" class="p-6">
                <!-- 头像上传模块 -->
                <div class="mb-8 flex flex-col items-center">
                    <div class="relative">
                        <!-- 移除 hidden 类 -->
                        <div class="upload-loading" id="loadingIndicator">
                            <img th:src="${result.data.authorAvatar}"
                                 id="avatarPreview"
                                 class="w-32 h-32 rounded-full object-cover shadow-md mb-4">
                        </div>
                        <label for="avatarUpload"
                               class="absolute bottom-0 right-0 bg-blue-500 text-white p-2 rounded-full cursor-pointer hover:bg-blue-600">
                            <i class="fas fa-camera"></i>
                        </label>
                        <input type="file" id="avatarUpload"
                               class="hidden" accept="image/*"
                               onchange="uploadAvatar(this)">
                    </div>
                    <p class="text-sm text-gray-500 mt-2">支持 JPG/PNG 格式，大小不超过 2MB</p>
                    <input type="hidden" id="avatarUrl" name="authorAvatar" th:value="${result.data.authorAvatar}">
                </div>

                <!-- 基本信息模块 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <label for="nickname" class="block text-sm font-medium text-gray-700 mb-1">昵称 *</label>
                        <input type="text" id="nickname" name="nickname" required
                               th:value="${result.data.nickname}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label for="realname" class="block text-sm font-medium text-gray-700 mb-1">真实姓名</label>
                        <input type="text" id="realname" name="realname"
                               th:value="${result.data.realname}"
                               class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                </div>

                <!-- 联系信息模块 -->
                <div class="mb-8">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">联系信息</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                            <input type="email" id="email" name="email"
                                   th:value="${result.data.email}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                            <input type="tel" id="phone" name="phone"
                                   th:value="${result.data.phone}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label for="qq" class="block text-sm font-medium text-gray-700 mb-1">QQ号码</label>
                            <input type="text" id="qq" name="qq"
                                   th:value="${result.data.qq}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>
                </div>

                <!-- 个人信息模块 -->
                <div class="mb-8">
                    <h2 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">个人信息</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="work" class="block text-sm font-medium text-gray-700 mb-1">职业</label>
                            <input type="text" id="work" name="work"
                                   th:value="${result.data.work}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div>
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">地址</label>
                            <input type="text" id="address" name="address"
                                   th:value="${result.data.address}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div class="md:col-span-2">
                            <label for="hobby" class="block text-sm font-medium text-gray-700 mb-1">兴趣爱好</label>
                            <input type="text" id="hobby" name="hobby"
                                   th:value="${result.data.hobby}"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>
                </div>

                <!-- 自我介绍模块 -->
                <div class="mb-8">
                    <label for="intro" class="block text-sm font-medium text-gray-700 mb-1">自我介绍</label>
                    <textarea id="intro" name="intro" rows="4"
                              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              th:text="${result.data.intro}"></textarea>
                </div>

                <!-- 操作按钮 -->
                <div class="flex justify-end gap-4 mt-8">
                    <a href="/user/info"
                       class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                        <i class="fas fa-times mr-2"></i>取消
                    </a>
                    <button type="submit"
                            class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                        <i class="fas fa-save mr-2"></i>保存修改
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 错误提示 -->
    <div th:unless="${result.code == 1}"
         class="bg-red-100 border border-red-400 text-red-700 px-6 py-4 rounded-lg text-center">
        <strong class="font-bold">⚠️ 错误！</strong>
        <span class="block sm:inline" th:text="${result.msg}">无法加载用户信息</span>
    </div>
</div>

<script>
    // 头像上传处理
    async function uploadAvatar(input) {
        if (!input.files?.[0]) return;

        const file = input.files[0];
        const MAX_SIZE = 2 * 1024 * 1024; // 2MB

        // 文件验证
        if (file.size > MAX_SIZE) {
            showToast('文件大小超过2MB限制', 'error');
            return;
        }

        const loading = document.getElementById('loadingIndicator');
        const preview = document.getElementById('avatarPreview');

        try {
            // 显示加载状态
            loading.classList.remove('hidden');
            preview.classList.add('upload-loading');

            const formData = new FormData();
            formData.append('file', file);

            const response = await fetch('/admin/common/upload', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (result.code === 1) {
                preview.src = result.data;
                document.getElementById('avatarUrl').value = result.data;
                showToast('头像上传成功', 'success');
            } else {
                showToast(result.msg || '上传失败', 'error');
            }
        } catch (error) {
            console.error('上传失败:', error);
            showToast('上传服务异常，请稍后重试', 'error');
        } finally {
            loading.classList.add('hidden');
            preview.classList.remove('upload-loading');
        }
    }

    // 显示提示信息
    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `fixed top-6 right-6 px-4 py-3 rounded-md shadow-lg text-white ${
            type === 'success' ? 'bg-green-500' :
                type === 'error' ? 'bg-red-500' : 'bg-blue-500'
        } animate-slide-in`;

        toast.innerHTML = `
        <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle'} mr-2"></i>
        ${message}
    `;

        document.body.appendChild(toast);

        setTimeout(() => {
            toast.classList.add('animate-slide-out');
            setTimeout(() => toast.remove(), 500);
        }, 3000);
    }
</script>
</body>
</html>